<template>
	<div class="ArticleList">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>邮件管理</el-breadcrumb-item>
			<el-breadcrumb-item>邮件费用表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card class="box-card">

      <el-row>
        <el-col :span="3" style="height:120px;l">
          <div class="grid-content bg-purple">重量(g)</div>
        </el-col>
        <el-col :span="3"
        v-for="(item, key) in tableDataSheng" :key="key"
        style="height:120px;"
        >
          <div class="grid-content bg-purple">{{item}}</div>
        </el-col>
      </el-row>

      <el-row v-for="(item, key) in tableDataQu[0]" :key="key">
        <el-col :span="3">
          <div class="grid-content bg-purple">{{key * 1000}}g</div>
        </el-col>
         <el-col :span="3">
           <div class="grid-content bg-purple">{{item}}</div>
         </el-col>
         <el-col :span="3">
           <div class="grid-content bg-purple">{{tableDataQu[1][key]}}</div>
         </el-col>
         <el-col :span="3">
           <div class="grid-content bg-purple">{{tableDataQu[2][key]}}</div>
         </el-col>
         <el-col :span="3">
           <div class="grid-content bg-purple">{{tableDataQu[3][key]}}</div>
         </el-col>
         <el-col :span="3">
           <div class="grid-content bg-purple">{{tableDataQu[4][key]}}</div>
         </el-col>
         <el-col :span="3">
           <div class="grid-content bg-purple">{{tableDataQu[5][key]}}</div>
         </el-col>
      </el-row>



		</el-card>
	</div>
</template>

<script>
export default {
  name: 'ArticleList',
  data () {
    return {
      tableDataSheng: [],
      tableDataQu: [],
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    async getArticleList () {
      const {
        data: res
      } = await this.$http.get(
        'api/admin/article/ems_single'
      )
      console.log(res.data)
      this.tableDataSheng = res.data.sheng
      this.tableDataQu = res.data.qu
      // this.listData = res.data.data
      // this.total = res.data.total
      // console.log(this.listData)
    }
  }
}
</script>
<style lang="less" scoped>
  .el-row {
    margin-left:30px;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    border:1px rgba(0, 0, 0, .12) solid;
    text-align:center;
    margin:0;
    font-size:12px;
  }
  .el-col {
    border-radius: 4px;
    background:#fff;
    border-right:1px rgba(0, 0, 0, .12) solid;

    padding:10px;
    overflow: hidden;
  }
</style>
